<template>
	<div id="goods_say">

		<div class="mui-scroll-wrapper" id="goods_say_scroll">
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->
				<div class="ptsp_say" id='pingjia'>
							<div class="title">
								商品评价
							</div>

							<!-- 循环数据 -->
							<div class="user_say" v-for="(i,k) in say_list" >
								<div>
									<img class="user_img" :src="i.wxhead" />
									<span>{{i.nickname}}</span>

								</div>
								<div class="user_img" style="clear: both;"></div>
								<div class="user_msg">
									<span style="color: #888888;" > {{i.time}}</span>
									<div style="color: #353535;" > {{i.content}}</div>
									<div class="img_list">
										<img   data-preview-src=""  data-preview-group="1" style="width: 3.632rem;margin-right: 0.2rem;" alt="" src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/562c11dfa9ec8a132d6bb732f003918fa1ecc0eb.jpg">
										<img   data-preview-src=""  data-preview-group="1" style="width: 3.632rem;margin-right: 0.2rem;" alt="" src="http://www.vstou.com/upload/image/74/201512/1450506159644159.jpg">
										<img   data-preview-src=""  data-preview-group="1" style="width: 3.632rem;margin-right: 0.2rem;" alt="" src="http://img.xiazaizhijia.com/uploads/2017/0909/20170909113742695.jpg">

									</div>
								</div>
							</div>
							<!-- 循环数据 end -->
						</div>
						<br><br><br><br><br><br>

			</div>
		</div>




	</div>
</template>
<script>
	import preview from '../../../tools/plus.previewImage.js'
	import goods_ajax from '../../../ajax/goods_ajax'

	export default {
		name: 'goods_say',
    data(){
		  return{
		    say_list:[]
      }
    },
    created(){
		  goods_ajax.get_comment({
        goodsid:this.$store.state.goods.goods_info.goodsid
      },res=>{
		    if(res.length>0){

          this.say_list = res;
        }

      })
    },
		mounted:function(){
			mui('#goods_say_scroll').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
      mui.plusReady(function () {
        preview('.img_list img','#goods_say_scroll');
      })

		}
	}
</script>




















<style lang="less" scoped>


	.ptsp_say .title {
  padding: 0 0.5973rem;
  height: 1.8347rem;
  line-height: 1.8347rem;
  font-size: 0.512rem;
  text-align: center;
  border-bottom: 1px solid #ededed;
}
.ptsp_say .user_say {
  padding: 0.5973rem;
  font-size: 0.4693rem;
  color: #353535;
  line-height: 1.024rem;
  overflow: hidden;
}
.ptsp_say .user_say .user_img {
  width: 1.024rem;
  height: 1.024rem;
  border-radius: 50%;
  float: left;
}
.ptsp_say .user_say .user_msg {
  float: left;
  margin-left: 0.4267rem;
}
.ptsp_say .user_say .user_msg .img_list {
  width: 100%;
  margin-top: 0.32rem;
}
.ptsp_say .user_say .user_msg .img_list img {
  width: 5.632rem;
  height: auto;
}
.ptsp_say .user_say div:first-child {
  height: 1.024rem;
}
.ptsp_say .user_say div:first-child span {
  line-height: 1.0667rem;
  float: left;
  margin-left: 0.4267rem;
}










	// 图片预览样式
	.mui-preview-image.mui-fullscreen {
		position: fixed;
		z-index: 99999;
		background-color: #000;
	}

	.mui-preview-header,
	.mui-preview-footer {
		position: absolute;
		width: 100%;
		left: 0;
		z-index: 10;
	}

	.mui-preview-header {
		height: 44px;
		top: 0;
	}

	.mui-preview-footer {
		height: 50px;
		bottom: 0px;
	}

	.mui-preview-header .mui-preview-indicator {
		display: block;
		line-height: 25px;
		color: #fff;
		text-align: center;
		margin: 15px auto 4;
		width: 70px;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 12px;
		font-size: 16px;
	}

	.mui-preview-image {
		display: none;
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.mui-preview-image.mui-preview-in {
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}

	.mui-preview-image.mui-preview-out {
		background: none;
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
	}

	.mui-preview-image.mui-preview-out .mui-preview-header,
	.mui-preview-image.mui-preview-out .mui-preview-footer {
		display: none;
	}

	.mui-zoom-scroller {
		position: absolute;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		-webkit-backface-visibility: hidden;
	}

	.mui-zoom {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.mui-slider .mui-slider-group .mui-slider-item img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
		width: 100%;
	}

	.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
		display: inline-table;
	}

	.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
		display: table-cell;
		vertical-align: middle;
	}

	.mui-preview-loading {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
	}

	.mui-preview-loading.mui-active {
		display: block;
	}

	.mui-preview-loading .mui-spinner-white {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -25px;
		margin-top: -25px;
		height: 50px;
		width: 50px;
	}

	.mui-preview-image img.mui-transitioning {
		-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
		transition: transform 0.5s ease, opacity 0.5s ease;
	}

	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	p img {
		max-width: 100%;
		height: auto;
	}
</style>
